// 绘制点
export function SquareOverlay (center, length, color, pointcolorDot, titleName) {
  this._center = center
  this._length = length
  this._color = color
  this._class = pointcolorDot
  this._title = titleName
}

// 继承API的BMap.Overlay
SquareOverlay.prototype = new BMap.Overlay()
SquareOverlay.prototype.initialize = function (map) {
  // 保存map对象实例
  this._map = map
  // 创建div元素，作为自定义覆盖物的容器
  let div = document.createElement('div')
  // 可以根据参数设置元素外观
  div.style.width = '30px'
  div.style.height = '30px'
  div.style.background = 'transparent'
  // div.style.background = this._color
  div.style.borderRadius = 50 + '%'
  div.style.cursor = 'pointer'
  div.style.position = 'relitive'
  div.style.zIndex = '150'
  let dot = document.createElement('div')
  dot.className = this._class
  div.style.position = 'absolute'
  dot.style.width = this._length + 'px'
  dot.style.height = this._length + 'px'
  dot.style.background = this._color
  dot.style.borderRadius = 50 + '%'
  div.appendChild(dot)
  // 将div添加到覆盖物容器中
  let title = document.createElement('div')
  title.innerHTML = this._title
  title.style.color = '#fff'
  title.style.position = 'absolute'
  title.style.width = '90px'
  title.style.height = '30px'
  title.style.textAlign = 'center'
  title.style.marginLeft = '-45px'
  title.style.left = '50%'
  title.className = 'shwoHideName'
  title.style.display = 'none'
  div['onmouseover'] = function () {
    title.style.display = 'block'
  }
  div['onmouseout'] = function () {
    title.style.display = 'none'
  }
  div.appendChild(title)
  map.getPanes().markerPane.appendChild(div)
  // 保存div实例
  this._div = div
  this._titlediv = title
  // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
  // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
  return div
}
// 实现绘制方法
SquareOverlay.prototype.draw = function () {
// 根据地理坐标转换为像素坐标，并设置给容器
  var position = this._map.pointToOverlayPixel(this._center)
  this._div.style.left = position.x - this._length / 2 + 'px'
  this._div.style.top = position.y - this._length / 2 + 'px'
  /* this._div.addEventListener('click', function () {
   /!* this.openInfoWindow(infoWindow)
   document.getElementById('imgDemo').onload = function () {
   infoWindow.redraw()
   } *!/
   console.log('点击地图')
   }) */
}
// 实现显示方法
SquareOverlay.prototype.show = function () {
  if (this._div) {
    this._div.style.display = ''
  }
}
// 实现隐藏方法
SquareOverlay.prototype.hide = function () {
  if (this._div) {
    this._div.style.display = 'one'
  }
}
SquareOverlay.prototype.addEventListener = function (event, fun) {
  this._div['on' + event] = fun
}

// 定义一个控件类，即function
export function ZoomControl (addFun, reduceFun) {
  // 设置默认停靠位置和偏移量
  this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT
  this.defaultOffset = new BMap.Size(50, 120)
  this._addFun = addFun
  this._reduceFun = reduceFun
}

// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control()
// 自定义控件必须实现initialize方法，并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器，并将其添加到地图容器中
ZoomControl.prototype.initialize = function (map) {
  let mydiv = document.createElement('div')
  mydiv.style.width = '35px'
  mydiv.style.height = '65px'
  mydiv.style.textAlign = 'center'
  mydiv.style.border = '1px solid #225D92'
  mydiv.style.background = '#173A58'
  mydiv.className = 'mapGroupButton'
  let Htmlplus = document.createElement('div')
  Htmlplus.id = 'Htmlplus'
  Htmlplus.style.height = '32px'
  Htmlplus.style.padding = '10px 6px'
  Htmlplus.style.borderBottom = '1px solid #225D92'
  Htmlplus.style.margin = '0 auto'
  Htmlplus.className = 'addButton'
  Htmlplus.style.cursor = 'pointer'
  let imglplus = document.createElement('img')
  imglplus.setAttribute('src', '../../../../../static/img/icon_add.png')
  imglplus.style.width = '11px'
  imglplus.style.height = '11px'
  Htmlplus.appendChild(imglplus)
  // Htmlplus.onclick = function () {
  //   map.zoomTo(map.getZoom() + 1)
  // }
  Htmlplus.onclick = this._addFun
  let Htmlminus = document.createElement('div')
  Htmlminus.id = 'Htmlminus'
  Htmlminus.style.height = '32px'
  Htmlminus.style.padding = '7px 6px 0 6px'
  Htmlminus.className = 'minusButton'
  Htmlminus.style.cursor = 'pointer'
  Htmlminus.style.margin = '0 auto'
  let imglminus = document.createElement('img')
  imglminus.setAttribute('src', '../../../../../static/img/icon_minus.png')
  imglminus.style.width = '11px'
  imglminus.style.height = '3px'
  Htmlminus.appendChild(imglminus)
  // Htmlminus.onclick = function () {
  //   map.zoomTo(map.getZoom() - 1)
  // }
  Htmlminus.onclick = this._reduceFun
  mydiv.appendChild(Htmlplus)
  mydiv.appendChild(Htmlminus)
  map.getContainer().appendChild(mydiv)
  return mydiv
}
// 闪烁点绘制
let BW = 0
let BH = 0
let ctx = null
let stars = []
let rs = []
let isNowTimeData = false
let py = null
let gridWidth = 10000
let canvas = null
// let swS = project.lngLatToPoint(new BMap.Point(swS.lng, swS.lat))
// let neS = project.lngLatToPoint(new BMap.Point(neS.lng, neS.lat))
let project = null
// let bounds = null
let sw = null
let ne = null
let map = null

export function drawMyLightStation (mymap, myproject, lightStationPoint) {
  project = myproject
  let bounds = mymap.getBounds()
  let swS = bounds.getSouthWest()
  let neS = bounds.getNorthEast()
  // bounds = mybounds
  sw = project.lngLatToPoint(new BMap.Point(swS.lng, swS.lat))
  ne = project.lngLatToPoint(new BMap.Point(neS.lng, neS.lat))
  rs = lightStationPoint
  map = mymap
  render()
  startCbk(nowTimeCbk)
}

function Star (options) {
  this.init(options)
}

Star.prototype.init = function (options) {
  this.x = ~~(options.x)
  this.y = ~~(options.y)
  this.initSize(options.size)
  if (~~(0.5 + Math.random() * 7) === 1) {
    this.size = 0
  } else {
    this.size = this.maxSize
  }
}
Star.prototype.initSize = function (size) {
  let sizeS = ~~(size)
  this.maxSize = sizeS > 6 ? 6 : sizeS
}
Star.prototype.render = function (i) {
  let p = this
  if (p.x < 0 || p.y < 0 || p.x > BW || p.y > BH) {
    return
  }
  ctx.beginPath()
  let gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size)
  gradient.addColorStop(0, 'rgba(7,120,249,1)')
  gradient.addColorStop(1, 'rgba(7,120,249,0.3)')
  ctx.fillStyle = gradient
  ctx.arc(p.x, p.y, p.size, Math.PI * 2, false)
  ctx.fill()
  if (~~(0.5 + Math.random() * 7) === 1) {
    p.size = 0
  } else {
    p.size = p.maxSize
  }
}

function render () {
  renderAction()
  setTimeout(render, 180)
}

function renderAction () {
  ctx.clearRect(0, 0, BW, BH)
  ctx.globalCompositeOperation = 'lighter'
  for (let i = 0, len = stars.length; i < len; ++i) {
    if (stars[i]) {
      stars[i].render(i)
    }
  }
}

export function ComplexCustomOverlay (point) {
  this._point = point
}

ComplexCustomOverlay.prototype = new BMap.Overlay()
ComplexCustomOverlay.prototype.initialize = function (map) {
  this._map = map
  canvas = this.canvas = document.createElement('canvas')
  canvas.style.cssText = 'position:absolute;left:0;top:0;z-index:100;'
  ctx = canvas.getContext('2d')
  let size = map.getSize()
  canvas.width = BW = size.width
  canvas.height = BH = size.height
  map.getPanes().labelPane.appendChild(canvas)
  // map.getContainer().appendChild(canvas)
  return this.canvas
}
ComplexCustomOverlay.prototype.draw = function () {
  let map = this._map
  let bounds = map.getBounds()
  let sw = bounds.getSouthWest()
  let ne = bounds.getNorthEast()
  let pixel = map.pointToOverlayPixel(new BMap.Point(sw.lng, ne.lat))
  py = pixel
  if (rs.length > 0) {
    showStars(rs)
  }
}
/* ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
 this._div['on' + event] = fun
 let p = this
 console.log(p)
 } */
let requestMgr = {
  request: function (time, successCbk) {
    showStars(rs)
    if (successCbk) {
      successCbk()
    }
  }
}

function nowTimeCbk (time) {
  requestMgr.request(time, function () {
    if (isNowTimeData) {
      setTimeout(function () {
        if (isNowTimeData) {
          startCbk(nowTimeCbk)
        }
      }, 1000)
    }
  })
}

function showStars (rs) {
  stars.length = 0
  for (let i = 0, len = rs.length; i < len; i++) {
    let baiduXY = new BMap.Point(rs[i][0], rs[i][1])
    let projection2 = map.getMapType().getProjection()
    let mocaXY = projection2.lngLatToPoint(baiduXY)
    let item = rs[i]
    let addNum = gridWidth / 2
    let x = item[0] * gridWidth + addNum
    let y = item[1] * gridWidth + addNum
    x = mocaXY.x
    y = mocaXY.y
    let point = project.pointToLngLat(new BMap.Pixel(x, y))
    let px = map.pointToOverlayPixel(point)
    let s = new Star({
      x: px.x - py.x,
      y: px.y - py.y,
      size: item[2]
    })
    stars.push(s)
  }
  canvas.style.left = py.x + 'px'
  canvas.style.top = py.y + 'px'
  renderAction()
}

function startCbk (cbk) {
  let now = new Date()
  let time = {
    hour: now.getHours(),
    minute: now.getMinutes(),
    second: now.getSeconds()
  }
  if (cbk) {
    cbk(time)
  }
}

console.log(sw, ne)
